<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/home">主页</router-link>
        <router-link to="/introduce">公司介绍</router-link>
        <router-link to="/proputice">产品详情</router-link>
        <router-view></router-view>
    </div>
    <template id="home">
        <div class="home">
            <h1>主页</h1>
        </div>
       
    </template>
    <template id="introduce">
        <div class="introduce">
            <h1>公司介绍</h1>    
        </div>
    </template>
    <template id="proputice">
        <div class="proputice">
            <h1>产品详情</h1>
        </div>
    </template>
</body>
<script src="./myapp/node_modules/vue/dist/vue.js"></script>
<script src="./myapp/node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let Home={
        template:"#home",
    }
    let Introduce ={
        template:"#introduce",  
    }
    let Proputice={
        template:"#proputice",
    }
    let routes=[
        {
            path: "/home",
            component: Home
        },
        {
            path: "/introduce",
            component: ()=>("./Introduce.js")
        },
        {
            path: "/proputice",
            component: Proputice
        }
    ]
     let router = new VueRouter({
         routes,
     })   
    let vm = new Vue({
        router,
        el: "#app"
    })
</script>
</html>